<!-- 编辑弹窗 -->
<template>
  <ele-modal
    inner
    width="30%"
    :movable="false"
    :visible="visible"
    :close-on-click-modal="true"
    :before-close="handleClose"
    custom-class="ele-dialog-form"
    :title="isUpdate ? '收款' : '收款'"
    @update:visible="updateVisible" 
  >
  <el-form ref="form" :model="form" :rules="rules" label-width="100px" >
    <el-row :gutter="24">
      <el-col :md="24" :sm="24">
        <el-form-item label="收款账户:" prop="bankAccountId">
          <el-select  v-model="form.bankAccountId" filterable clearable placeholder="请选择收款账户" style="width:100%" >
            <el-option  v-for="item in bankAccountDatas" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
        </el-form-item>
      </el-col>
      <el-col :md="24" :sm="24">
        <el-form-item label="收款金额:" prop="amount">
          <el-input v-model="form.amount" placeholder="请输入收款金额"  />
        </el-form-item>
      </el-col>
      <el-col :md="24" :sm="24" >
        <el-form-item label="收款日期:" prop="recDate">
          <el-date-picker v-model="form.recDate" type="date" placeholder="请输收款日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width:100%"/>
        </el-form-item>
      </el-col>
      <el-col :md="24" :sm="24">
        <el-form-item label="币种:" >
          <el-select v-model="form.currencyId" clearable placeholder="请选择币种" style="width:100%" disabled >
            <el-option v-for="(item, index) in currencyDatas" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :md="24" :sm="24">
        <el-form-item label="汇率:" >
          <el-input v-model="form.rate"  disabled  >
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :md="24" :sm="24" >
        <el-form-item label="备注:"  >
          <el-input :rows="2"
              clearable
              type="textarea"
              :maxlength="200"
              v-model="form.remark"
              placeholder="请输入备注说明" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <div slot="footer">
    <el-button @click="updateVisible(false)">取消</el-button>
    <el-button type="primary" :loading="loading" @click="save" v-permission="'Financial_Recaccountaui_Save'">
      保存
    </el-button>
  </div>
</ele-modal>
</template>
<script>
 import { GetAllBackAccount} from '@/api/basicdatamanager/bankaccount';
 import { AddRecreceiptitem } from '@/api/finance/recreceipt';
 import { QueryAllChildDictViewByCode } from '@/api/systemmanager/dictmanager';
 import { QueryModelByScurrencyId } from '@/api/basicdatamanager/ratemanager';

 export default {
    name: 'RecreceiptAuitEdit',

    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 修改回显的数据
      data: Object,
      // 按钮索引
      btnIndex:String,
    },

    data() {
      return {
        // 表单数据
        form: {},
        // 表单验证规则
        rules: {
          bankAccountId: [{required: true,message: '请选择账户',trigger: 'blur'}],
          amount: [{required: true,message: '请输入收款金额',trigger: 'blur'}],
          recDate: [{required: true,message: '请输入收款日期',trigger: 'blur'}],
        },
        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false,
        defaultDate:new Date(),
        currencyDatas:[],
        bankAccountDatas:[],
        computeDirection:2,//默认奈拉
      };
    },

    //初始化数据
    mounted(){
      this.initData();
    },
    methods: {
      /* 初始化数据 */
      async initData(){

        GetAllBackAccount().then((res)=>{
          this.bankAccountDatas = [];
          this.bankAccountDatas = res;
        });

        QueryAllChildDictViewByCode(this.Constant.C_HB).then((res)=>{
          this.currencyDatas = [];
          this.currencyDatas = res;
        });
      },

      /* 保存编辑 */
      save() {
        //校验必填信息
        this.$refs['form'].validate((valid) => {
          if (!valid) {return false;}

          // if(this.data.surplusAmount<this.form.amount){
          //   this.$message.info("收款金额不能大于未收金额");
          //   return;
          // }

          let recreceipt ={
            rate:this.data.rate,
            orderNo:this.data.orderNo,
            orderId:this.data.orderId,
            amount:this.form.amount,
            recDate:this.form.recDate,
            currencyId:this.data.currencyId,
            customerId:this.data.customerId,
            bankAccountId:this.form.bankAccountId,
            remark:this.form.remark,
            amountCn:this.computeDirection == 1? (this.form.amount*this.data.rate).toFixed(4) : (this.form.amount/this.data.rate).toFixed(4),
          }

          this.loading = true;
          AddRecreceiptitem(recreceipt)
            .then((msg) => {
              this.loading = false;
              this.$message.success(msg);
              this.updateVisible(false);
              //回调父组件方法
              this.$emit('done');
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        });
      },

      /* 更新visible */
      updateVisible(value) {
        //更新父组件中的visible的值
        this.$emit('update:visible', value);
      },

      handleClose() {
        this.$emit('update:visible', false);
      },
  },
  
  /* 监听visible属性变化 */
  watch: {
    visible(visible) {
      this.form = {...this.data,amount:this.data.surplusAmount,recDate:this.defaultDate};

      QueryModelByScurrencyId(this.data.currencyId).then((res)=>{
        if(res){
          this.computeDirection = res.computeDirection;
        }
      });

      if(this.data.rate && this.data.surplusAmount){
        let r = parseFloat(this.data.rate);
        let s = parseFloat(this.data.surplusAmount);
        this.form.amountCn =  this.computeDirection == 1? (s*r).toFixed(4) : (s/r).toFixed(4);
      }
    }
  }
};
</script>
<style lang='scss' scoped>
</style>